<!-- 在这个文件对每个tab对应的列表进行渲染 -->
<template>
	<view class="content">
		<!--  :enable-back-to-top="currentIndex===tabIndex" 在微信小程序上可以多加这一句，因为默认是允许点击返回顶部的，但是这个页面有多个scroll-view，会全部返回顶部，所以需要控制是当前index才允许点击返回顶部 -->
		<!-- 如果当前页已经加载过数据或者当前切换到的tab是当前页，才展示当前页数据（懒加载） -->
		<z-paging ref="pagingRef" v-if="firstLoaded || isCurrentPage" v-model="dataList" @query="queryList"
			:fixed="false">
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<OrderCard v-for="(item, index) in dataList" :key="index" :cardData="item" @itemClick="itemClick(item)">
				<template #bottom>
					<view class="uni-flex uni-align-center uni-justify-between menu">
						<!-- <l-popover v-if="['SERVICE_END'].includes(item.orderStatus)"> -->
						<l-popover>
							<text class="more">更多</text>
							<template #content>
								<view class="uni-flex-column">
									<text class="power-text" @click="toMore(item, 0)">申请开票</text>
									<text class="power-text" @click="toMore(item, 1)">删除订单</text>
								</view>
							</template>
						</l-popover>
						<view class="uni-flex-item uni-flex button-box">
							<text v-if="['ORDER_WAIT_PAYMENT'].includes(item.orderStatus)" class="button1"
								@click.stop="toCancel(item)">取消订单</text>
							<text v-if="['ORDER_WAIT_PAYMENT'].includes(item.orderStatus)" class="button2"
								@click.stop="toPay(item)">去付款</text>
							<!--  -->

							<!-- 订单状态为待服务并且服务状态为待服务、已接单、已预约、服务中状态显示申请退款按钮 -->
							<text
								v-if="['ORDER_WAIT_SERVICE'].includes(item.orderStatus)&&['SERVICE_WAIT','SERVICE_RECEIVED','SERVICE_ADVANCE','SERVICE_ING'].includes(item.serviceStatus)"
								class="button1" @click.stop="handleRefund(item)">申请退款</text>

							<!-- 服务状态为待服务、服务中、服务结束显示申请售后按钮 -->
							<text v-if="['SERVICE_WAIT', 'SERVICE_ING', 'SERVICE_END'].includes(item.serviceStatus)"
								class="button1" @click.stop="handleAfterSale(item)">申请售后</text>

							<text
								v-if="['ORDER_WAIT_EVALUATED'].includes(item.orderStatus)&&['SERVICE_END'].includes(item.serviceStatus)"
								class="button1" @click.stop="handleEvaluate(item)">去评价</text>

							<text v-if="['SERVICE_END'].includes(item.serviceStatus)" class="button2"
								@click.stop="toPayBill(item)">再买一单</text>
						</view>
					</view>
				</template>
			</OrderCard>
			<!-- 设置自己的empty组件，非必须。空数据时会自动展示空数据组件，不需要自己处理 -->
			<template #empty>
				暂无数据
			</template>
		</z-paging>
	</view>
</template>
<script setup>
	import {
		ref,
		watch,
		nextTick,
		onMounted,
		onUnmounted
	} from 'vue';
	import dict from '@/utils/dict.js';
	import OrderCard from './components/orderCard.vue';
	import {
		queryConsumerList
	} from '@/api/consumerOrder.js';

	import useOrder from '../useOrder';
	const {
		handlePay,
		handleCancel,
		handleRefund,
		handleAfterSale,
		handleEvaluate,
		handlePayBill,
		handlePower
	} = useOrder();

	const props = defineProps({
		// 当前组件的index，也就是当前组件是swiper中的第几个
		tabIndex: {
			type: Number,
			default: 0
		},
		// 当前swiper切换到第几个index
		currentIndex: {
			type: Number,
			default: 0
		},
		currentName: {
			type: String,
			default: ''
		}
	});

	const emit = defineEmits(['reload']);
	// 响应式数据
	const dataList = ref([]);
	const firstLoaded = ref(false);
	const isCurrentPage = ref(false);
	const pagingRef = ref(null);

	// 监听currentIndex变化
	watch(
		() => props.currentIndex,
		(newVal) => {
			if (newVal === props.tabIndex) {
				// 懒加载，当滑动到当前的item时，才去加载
				if (!firstLoaded.value) {
					// 这里需要延迟渲染z-paging的原因是为了避免在一些平台上立即渲染可能引发的底层报错问题
					nextTick(() => {
						setTimeout(() => {
							isCurrentPage.value = true;
						}, 100);
					});
				}
			}
		}, {
			immediate: true
		}
	);

	// 接收父组件传过来的刷新列表要求
	const reload = () => {
		nextTick(() => {
			// 刷新列表数据(如果不希望列表pageNum被重置可以用refresh代替reload方法)
			pagingRef.value?.reload();
		});
	};

	// 暴露方法给父组件
	defineExpose({
		reload
	});

	// 列表数据请求
	const queryList = async (pageNum, pageSize) => {
		try {
			// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
			// 这里的pageNum和pageSize会自动计算好，直接传给服务器即可
			const params = {
				pageNum,
				pageSize,
				//   orderStatus: props.orderStatus,
				orderStatus: props.currentValue
				// orderStatus: dict.orderStatus.find((item) => item.label === props.currentName)?.value ?? "",
			};
			// 模拟请求服务器获取分页数据，请替换成自己的网络请求
			const res = await queryConsumerList(params);

			// // 将请求的结果数组传递给z-paging
			pagingRef.value?.complete(res.rows || []);
			firstLoaded.value = true;
		} catch (error) {
			pagingRef.value?.complete(false);
		}
	};

	// 点击item事件
	const itemClick = (item) => {
		uni.navigateTo({
			url: '/pages/order/consumerOrder/orderDetail?id=' + item.id
		});
	};

	const toPay = (data) => {
		// handlePay(data)
		// 	.then((res) => {
		// 		// console.log('handlePay成功回调：', res);
		// 		queryList(); // 支付成功后刷新列表
		// 	})
		// 	.catch((err) => {
		// 		// console.error('handlePay失败回调：', err); // 新增：捕获handlePay传递的错误
		// 		uni.showToast({
		// 			title: err.msg||'支付失败' , // 显示具体错误信息（更友好）
		// 			icon: 'error'
		// 		});
		// 		if (err.msg === '请选择服务时间!!!') {
		// 			setTimeout(() => {
		// 				uni.navigateTo({
		// 					url: `/pages/order/consumerOrder/placeOrder?id=${data.id}`
		// 				})
		// 			}, 1500)
		// 		}


		// 	});
		uni.navigateTo({
		    url: `/pages/order/consumerOrder/placeOrder?id=${data.id}`,
		    // 关键：添加 events 监听详情页的“刷新指令”
		    events: {
		      // 监听详情页触发的“refresh”事件
		      refresh: () => {
		        pagingRef.value?.reload(); // 触发列表刷新
		      }
		    }
		  });
	};

	const toCancel = (data) => {
		handleCancel(data)
			.then((res) => {
				queryList();
			})
			.catch((err) => {
				uni.showToast({
					title: '失败',
					icon: 'error'
				});
			});
	};

	// 页面组件中 toPayBill 方法修改
	const toPayBill = (data) => {
		console.log("原始订单数据：", data);

		// 1. 预处理订单数据：确保 priceIds 字段存在（避免 undefined）
		const orderData = {
			...data,
			// 若 data 中无 priceIds，直接设为空数组；否则保留原值（后续在 handlePayBill 中二次处理）
			priceIds: data?.priceIds ?? []
		};

		// 2. 调用 handlePayBill，传递预处理后的订单数据
		handlePayBill(orderData)
			.then((res) => {
				// 若需要使用后端返回的新订单数据（如跳转支付），可在此处处理

				uni.showToast({
					title: res.msg || "订单创建成功",
					icon: "none",
					duration: 1200
				});
				pagingRef.value?.reload();
				// setTimeout(() => {
				// 	uni.redirectTo({
				// 		url: "/pages/my/my"
				// 	});
				// }, 1500);
			})
			.catch((err) => {
				// 捕获 handlePayBill 抛出的错误，避免控制台报错
				console.error("创建订单失败：", err);
				// 无需重复提示（handlePayBill 已内部处理错误提示）
			});
	};

	const toMore = (data, type) => {
		if (type) {
			handlePower(data, type)
				.then((res) => {
					queryList();
				})
				.catch((err) => {
					uni.showToast({
						title: '失败',
						icon: 'error'
					});
				});
		} else {
			handlePower(data, type)
		}
	};
	onMounted(() => {
		// uni.$on("refreshOrderList", () => {
		// 	console.log("收到刷新订单列表的指令");
		// 	// 调用列表页已有的“请求接口方法” queryList，重置页码为第1页
		// 	nextTick(() => {
		// 		// 注意：z-paging 组件有自带的刷新方法，优先用组件方法
		// 		pagingRef.value?.reload(); // reload() 会重置pageNum为1并重新请求接口
		// 		// 若未用z-paging，直接调用 queryList(1, 10)（10为你的pageSize）
		// 	});
		// });
	})
	onUnmounted(() => {
		// uni.$off("refreshOrderList");
	});
</script>
<style lang="scss" scoped>
	.content {
		height: calc(100vh - 85rpx);
	}

	.menu {
		margin-top: 30rpx;

		.more {
			font-size: 24rpx;
			color: #999999;
		}

		.power-text {
			font-size: 22rpx;
			color: #333333;

			&:not(:last-child) {
				border-bottom: 1rpx solid #e2e2e2;
			}
		}

		.button1 {
			font-size: 24rpx;
			color: #333333;
			padding: 12rpx 32rpx;
			border: 1px solid #999999;
			border-radius: 28rpx;
			margin-left: 24rpx;
		}

		.button2 {
			font-size: 24rpx;
			color: #ffffff;
			padding: 12rpx 32rpx;
			background: #2f80ed;
			border-radius: 28rpx;
			margin-left: 24rpx;
		}
	}

	.button-box {
		justify-content: flex-end;
	}
</style>